<template>
  <Form ref="formRef" :model="formState" name="BasicForm" v-bind="formItemLayout">
    <div class="md:flex">
      <div class="md: w-1/1">
        <FormItem :rules="[{ required: true, message: '请输入响应错误码' }]" label="响应错误码" name="retryOnResponseStatus">
          <Input v-model:value="formState.retryOnResponseStatus"/>
        </FormItem>
      </div>
    </div>
    <div class="md:flex my-5">
      <div class="md: w-1/2">
        <FormItem :rules="[{ required: true, message: '请输入重试次数' }]" label="重试次数" name="maxAttempts">
          <Input v-model:value="formState.maxAttempts"/>
        </FormItem>
      </div>
      <div class="md: w-1/2">
        <FormItem :rules="[{ required: true, message: '请选择重试策略' }]" label="重试策略" name="retryStrategy">
          <Select v-model:value="formState.retryStrategy">
            <SelectOption v-for="strategy in strategyList" v-bind:key="strategy.value" :value="strategy.value">
              {{ strategy.label }}
            </SelectOption>
          </Select>
        </FormItem>
      </div>
    </div>
    <div class="md:flex my-5">
      <div v-if="flag === true" class="md:w-1/3">
        <FormItem :rules="[{ required: true, message: '请输入重试间隔时间' }]" label="重试间隔时间" name="waitDuration">
          <Input v-model:value="formState.waitDuration"/>
        </FormItem>
      </div>
      <div v-if="flag === false" class="md:w-1/3">
        <FormItem :rules="[{ required: true, message: '请输入重试基准时间' }]" label="重试基准时间" name="initialInterval">
          <Input v-model:value="formState.initialInterval"/>
        </FormItem>
      </div>
      <div class="md: w-1/6">
        <FormItem :rules="[{ required: true, message: '请选择单位' }]" label="" name="rtTimeUnit">
          <Select v-model:value="formState.rtTimeUnit">
            <SelectOption v-for="unit in unitList" v-bind:key="unit.value" :value="unit.value">{{
                unit.label
              }}
            </SelectOption>
          </Select>
        </FormItem>
      </div>
      <div class="md:w-1/2">
        <FormItem :rules="[{ required: true, message: '请输入乘积因子' }]" label="乘积因子" name="multiplier">
          <Input v-model:value="formState.multiplier" :disabled="flag"/>
        </FormItem>
      </div>
    </div>
  </Form>
</template>

<script lang="ts" setup>
import {Form, FormItem, Input, Select, SelectOption} from 'ant-design-vue';
import {onMounted, reactive, ref, toRaw, watch} from 'vue';
import {ValidateErrorEntity} from 'ant-design-vue/es/form/interface';

interface FormState {
  retryOnResponseStatus: string;
  maxAttempts: string;
  retryStrategy: string;
  initialInterval: string;
  multiplier: string;
  waitDuration: string;
  rtTimeUnit: string;
}

const formItemLayout = {
  labelCol: {
    flex: '100px',
  },
  wrapperCol: {
    flex: '1',
  },
};
let formState = reactive<Record<string, any>>({});
const formRef = ref();
const emit = defineEmits(['submit', 'change', 'success', 'error']);
const flag = ref(false);

const strategyList = ref([]);
const isEdit = ref(false);
const unitList = ref([]);

onMounted(() => {
  formState.rtTimeUnit = 'Ms';
  unitList.value = [
    {
      label: 'ms',
      value: 'Ms',
    },
    {
      label: 's',
      value: 'S',
    },
  ];
  strategyList.value = [
    {
      label: '固定时间间隔',
      value: 'FixedInterval',
    },
    {
      label: '指数时间间隔',
      value: 'RandomBackoff',
    },
  ];
  formState.multiplier = '1';
  flag.value = true;
});
watch(
    () => formState.retryStrategy,
    () => {
      formState.initialInterval = undefined;
      formState.waitDuration = undefined;
      if (formState.retryStrategy === 'FixedInterval') {
        formState.multiplier = '1';
        flag.value = true;
      } else if (formState.retryStrategy === 'RandomBackoff') {
        formState.multiplier = '2';
        flag.value = false;
      }
    }
);

function setData(fieldValue: any) {
  formState.retryOnResponseStatus = fieldValue.retryOnResponseStatus;
  formState.maxAttempts = fieldValue.maxAttempts;
  formState.retryStrategy = fieldValue.retryStrategy;
  formState.initialInterval = fieldValue.initialInterval;
  formState.multiplier = fieldValue.multiplier;
  formState.waitDuration = fieldValue.waitDuration;
  formState.rtTimeUnit = fieldValue.rtTimeUnit;
  isEdit.value = true;
}

function submitHandler() {
  formRef.value
      .validate()
      .then(() => {
        let params = toRaw(formState);
        emit('submit', params);
        emit('success');
        isEdit.value = false;
        formState = undefined;
      })
      .catch((error: ValidateErrorEntity<FormState>) => {
        emit('error', error);
      });
}

defineExpose({submitHandler, setData});
</script>
